<template>
 <section class="page">
<div>
   <div class="w-title">{{applicationForm.tableHeader.title}}</div>
      <div class="horizontal-direction" style="margin-bottom: 15px;"><div class="horizontal-box">申请单位：<span>{{applicationForm.tableHeader.company}}</span></div><div class="horizontal-box">销毁单号：<span>{{applicationForm.tableHeader.oddNumbers}}</div></div>
      <div class="horizontal-direction" style="margin-bottom: 15px;"><div class="horizontal-box">申请人员：<span>{{applicationForm.tableHeader.lastUserNm}}</span></div><div class="horizontal-box">申请日期：<span>{{applicationForm.tableHeader.time}}</div></div>
      <div class="horizontal-direction" style="margin-bottom: 15px;"><div class="">销毁原因：<span>{{applicationForm.tableHeader.reason}}</span></div></div>
      <div>
        <table cellspacing="0" cellpadding="0" border="1" class="el-table__header main-table" style="width: 100%;margin-bottom: 3em;">
        <thead class="has-gutter">
          <tr class="text-center">
            <th>品牌</th>
            <th class="w-min-width">线别</th>
            <th>线别主管</th>
            <th>类别/部位名称</th>
            <th>客户订单</th>
            <th>工厂订单</th>
            <th>ARTICNO</th>
            <th>型体</th>
            <th>数量（只）</th>
            <th>箱号</th>
            <th>原因</th>
          </tr>
        </thead>
        <tbody>
        <template v-for="(item, index) in applicationForm.detailList">
          <tr class="text-left" v-if="item.partNm" :key="index">
            <td><div>{{item.brandNm}}</div></td>
            <td><div>{{item.wcNameContent}}</div></td>
            <td><div>{{item.leaderNm}}</div></td>
            <td><div>{{item.partNm}}</div></td>
            <td><div>{{item.po}}</div></td>
            <td><div>{{item.seId}}</div></td>
            <td><div>{{item.articNo}}</div></td>
            <td><div>{{item.articNM}}</div></td>
            <td><div class="text-center">{{item.destoryQty}}</div></td>
            <td><div class="text-center">{{item.boxXh}}</div></td>
            <td><div>{{item.nodeD}}</div></td>
          </tr>
          <tr class="total" v-if="!item.partNm" :key="index">
            <td  colspan="8"><div class="text-center text-16px">合计</div></td>
            <td><div class="text-center text-16px">{{item.destoryQty}}</div></td>
            <td><div></div></td>
            <td><div></div></td>
          </tr>
        </template>
        <tr class="blank">
          <td  colspan="11" class="blank"><div class="text-center"></div></td>
        </tr>
        <tr class="total">
          <td  colspan="8"><div class="text-center text-16px">总计</div></td>
          <td><div class="text-center text-16px">{{applicationForm.tableHeader.destoryQtyAmounts}}</div></td>
          <td><div></div></td>
          <td><div></div></td>
        </tr>
        </tbody>
        </table>
      </div>
      <!-- <div class="base-stamp">
        <table cellspacing="0" cellpadding="0" border="0" class="el-table__header table-flow">
          <thead class="has-gutter">
            <tr class="text-left">
              <th><div class="examine-cell">签核角色</div></th>
              <th><div class="examine-cell">签核人员</div></th>
              <th><div class="examine-cell">签核状况</div></th>
              <th><div class="examine-cell">签核时间</div></th>
            </tr>
          </thead>
          <tbody>
            <template >
              <tr class="text-left" v-for="(item, index) in applicationForm.qhChkmgrdList" :key="index">
                <td><div>{{item.flowDesc}}</div></td>
                <td><div>{{item.toUserCname}}</div></td>
                <td><div>{{item.chkStatusName}}</div></td>
                <td><div>{{item.chkDate}}</div></td>
              </tr>
            </template>
          </tbody>
        </table>
        <div  class="stamp"><img src="/febs/images/a.gif"></div>
    </div>
    <div class="horizontal-direction horizontal-sign"><div class="text-left">总经理签核:</div><div class="sign"></div></div> -->
    </div>
 </section>
</template>


<script>
module.exports = {
   props: {
    propsForm: {
      type: Object,
    },
  },
  data() {
       return {
          applicationForm: {
            tableHeader: {
              title: "", //销 毁 单 名-3
              company: "", //申 请 单 位
              oddNumbers: "", //销 毁 单 号
              lastUserNm: "", //申 请 人 员23
              time: "", //申 请 时 间
              reason: "", //销 毁 原 因
              destoryQtyAmounts: 0, //总计-2
            },
            detailList: [],
          },
        };
      },
  mounted() {
              this.applicationForm.tableHeader.title = this.propsForm.title; //销 毁 单 名-3
              this.applicationForm.tableHeader.company =this.propsForm.wcName; //申 请 单 位
              this.applicationForm.tableHeader.oddNumbers = this.propsForm.destoryNo; //销 毁 单 号
              this.applicationForm.tableHeader.lastUserNm = this.propsForm.lastUserNm; //申 请 人 员23
              this.applicationForm.tableHeader.time =this.propsForm.destoryDate.substring(0, 10); //申 请 时 间
              this.applicationForm.tableHeader.reason = this.propsForm.note; //销 毁 原 因
              this.applicationForm.tableHeader.destoryQtyAmounts = this.propsForm.destoryQtyAmounts; //总计-2
              this.applicationForm.detailList =this.propsForm.detailList; //表格
              this.applicationForm.qhChkmgrdList =this.propsForm.qhChkmgrdList; //审核
  },
};
</script>

<style>
.page {
  margin: auto;
  width: 100%;
  max-width: 297mm;
}
</style>
